<template>
    <div class="box_containter">
        <div class="login_box">
            <div class="login_logo">
                <img src="../assets/logo.png" alt="">
            </div>

            <el-form label-width="0px" :model="loginForm" :rules='rules' ref="loginFormRef" class="login_form">
                <el-form-item label="" prop="username">
                    <el-input v-model="loginForm.username">
                        <i slot="prefix" class="el-input__icon el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <el-input v-model='loginForm.password'>
                        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                    </el-input>
                </el-form-item>

                <el-form-item label="" class="login_btns">
                    <el-button type="primary" @click="login('loginFormRef')">登录</el-button>
                    <el-button type="info" @click="reset('loginFormRef')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            loginForm:{
                username:'admin',
                password:'123456'
            },
            rules:{
                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        login(loginFormRef){
        this.$refs[loginFormRef].validate(async valid=>{
          if(!valid) return
        //   console.log(valid);

          const results=await this.$http.post(`login`, this.loginForm)

          console.log(results)
          if (results.data.meta.status==200){
            this.$message({
              showClose:true,
              message: results.data.meta.msg,
              type: 'success'
            });

            // 存储密钥
            window.sessionStorage.setItem('token',results.data.data.token)

            // 跳转网页
            this.$router.push('/home')
          }else{
            this.$message({
              showClose:true,
              message: results.data.meta.msg,
              type: 'error'
            });
          }
        })
      },
        reset(loginFormRef){
            this.$refs[loginFormRef].resetFields();
        }
    },
}
</script>
<style lang="less" scoped>
    .box_containter{
        background-color: #2b4b6b;
        height: 100%;
        .login_box{
            height: 300px;
            width: 450px;
            background-color: #eee;
            border-radius: 10px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            .login_logo{
                width: 130px;
                height: 130px;
                background-color: white;
                padding: 20px;
                border-radius: 50%;
                box-shadow: 0 0 10px;
                position: absolute;
                left: 50%;
                transform: translate(-50%,-50%);
                img{
                    width: 100%;
                    border-radius: 50%;
                    background-color: #eee;
                }
            }
            .login_form{
                width: 100%;
                padding: 20px;
                box-sizing: border-box;
                position: absolute;
                bottom: 0;
                .login_btns{
                    display: flex;
                    justify-content: flex-end;
                }
            }
        }
    }
</style>